<template>
  <div v-loading="changeLoading" class="app-container">
    <transition name="el-collapse-transition">
      <div v-show="!isShowDetail">
        <el-form
          v-show="showSearch"
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          label-width="85px"
        >

          <el-form-item label="省：" prop="province">
            <el-input
              v-model="queryParams.province"
              placeholder="请输入地址"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="市：" prop="city">
            <el-input
              v-model="queryParams.city"
              placeholder="请输入地址"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="区县：" prop="district">
            <el-input
              v-model="queryParams.district"
              placeholder="请输入地址"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="街道乡镇：" prop="street">
            <el-input
              v-model="queryParams.street"
              placeholder="请输入地址"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <br />
          <el-form-item label="公司名称：" prop="compName">
            <el-input
              v-model="queryParams.compName"
              placeholder="请输入公司名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item
            label-width="100px"
            label="成交进度："
            prop="queryBusinessProgress"
          >
            <el-select
              v-model="queryBusinessProgress"
              filterable
              placeholder="请选择"
              @change="handleQuery"
            >
              <el-option
                v-for="item in businessOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="客户优先级：" prop="customRank" label-width="100px">
            <el-select
              v-model="queryParams.customRank"
              placeholder="客户优先级"
              clearable
              size="small"
            >
              <el-option
                v-for="item in customRankOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >搜索</el-button>
            <el-button
              icon="el-icon-refresh"
              size="mini"
              @click="resetQuery"
            >重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
            >导出</el-button>
          </el-col>
          <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
        </el-row>
        <el-table v-loading="loading" :data="kqAllInfoList" height="630" stripe @row-dblclick="handleDetailView">
          <el-table-column type="selection" width="55" align="center" fixed />
          <el-table-column label="公司名称" align="left" show-overflow-tooltip min-width="150">
            <template slot-scope="scope">
              <div>
                <el-button
                  v-if="scope.row.compName"
                  size="mini"
                  type="text"
                  icon="el-icon-document-copy"
                  @click="CopyFileUrl(scope.row.compName)"
                />&nbsp;<el-link
                  target="_blank"
                  :href="
                    'https://www.tianyancha.com/search?key=' + scope.row.compName
                  "
                >
                  {{ scope.row.compName }}
                </el-link>
              </div>

            </template>
          </el-table-column>
          <el-table-column label="网站" prop="url" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-link target="_blank" :href="scope.row.url">
                {{ scope.row.url }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="省/市/区县" prop="province" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.province }}/{{ scope.row.city }}/{{
                scope.row.district
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="街道/乡镇" align="center" prop="street" width="100">
            <template slot-scope="scope">
              {{ scope.row.street || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="详细地址" align="left" prop="address" min-width="150" sortable>
            <template slot-scope="scope">
              <div>
                <el-button
                  v-if="scope.row.address"
                  size="mini"
                  type="text"
                  icon="el-icon-document-copy"
                  @click="CopyFileUrl(scope.row.address)"
                />
                &nbsp;
                <span>{{ scope.row.address }}</span>
              </div>

            </template>
          </el-table-column>
          <el-table-column label="成交进度" align="center" prop="businessProgress">
            <template slot-scope="scope">

              <el-tooltip v-if="scope.row.businessProgress=='已放弃'" content="已放弃" placement="top">
                <el-button
                  type="danger"
                  icon="el-icon-close"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip v-if="scope.row.businessProgress=='已合作'" content="已合作" placement="top">
                <el-button
                  type="success"
                  icon="el-icon-check"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip v-if="scope.row.businessProgress=='已报价'" content="已报价" placement="top">
                <el-button
                  type="warning"
                  icon="el-icon-s-platform"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip v-if="scope.row.businessProgress=='已拜访'" content="已拜访" placement="top">
                <el-button
                  type="primary"
                  icon="el-icon-s-home"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip v-if="scope.row.businessProgress=='已沟通'" content="已沟通" placement="top">
                <el-button
                  type="primary"
                  icon="el-icon-phone"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip v-if="scope.row.businessProgress=='待拜访'" content="待拜访" placement="top">
                <el-button
                  type="info"
                  icon="el-icon-s-home"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip v-if="scope.row.businessProgress=='待沟通'" content="待沟通" placement="top">
                <el-button
                  type="info"
                  icon="el-icon-phone"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip v-if="scope.row.businessProgress=='未找到'" content="未找到" placement="top">
                <el-button
                  type="danger"
                  icon="el-icon-s-home"
                  circle
                ></el-button>
              </el-tooltip>
              <el-tooltip v-if="scope.row.businessProgress==undefined || scope.row.businessProgress ==''" content="未开始" placement="top">
                <el-button
                  icon="el-icon-upload"
                  circle
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="客户行业分类" align="center" prop="classify">
            <template slot-scope="scope">
              {{ scope.row.classify || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="客户优先级" align="center" prop="customRank">
            <template slot-scope="scope">
              {{ scope.row.customRank || "-" }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="150"
            class-name="small-padding"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="handleDetailView(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          :page-sizes="[10,50,100, 200,500,1000]"
          @pagination="getList"
        />
      </div>
    </transition>
    <transition name="el-collapse-transition">
      <el-container v-show="isShowDetail">
        <el-header height="40px">
          <el-page-header :content="this.form.compName" @back="handleback" />
          <el-divider></el-divider>
        </el-header>
        <el-main style="margin-top: 10px; padding-left: 0">
          <el-tabs v-model="activeName" tab-position="left">
            <el-tab-pane label="一：基本信息" name="first">
              <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="80px"
              >
                <el-row>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="公司名称:"
                      prop="compName"
                    >
                      <el-input
                        v-model="form.compName"
                        placeholder="请输入公司名称"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="公司法人:"
                      prop="compOwner"
                    >
                      <el-input
                        v-model="form.compOwner"
                        placeholder="请输入公司法人"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="经营状态:"
                      prop="opStatus"
                    >
                      <el-input
                        v-model="form.opStatus"
                        placeholder="请输入经营状态"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="省份:"
                      prop="province"
                    >
                      <el-input v-model="form.province" placeholder="省份" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item label-width="100px" label="地市:" prop="city">
                      <el-input v-model="form.city" placeholder="地市" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="区县:"
                      prop="district"
                    >
                      <el-input v-model="form.district" placeholder="区县" />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="参保人数:"
                      prop="empNum"
                    >
                      <el-input v-model="form.empNum" placeholder="参保人数" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="详细地址:"
                      prop="address"
                    >
                      <el-input v-model="form.address" placeholder="详细地址" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="街道/乡镇:"
                      prop="street"
                    >
                      <el-input
                        v-model="form.street"
                        placeholder="请输入街道/乡镇"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="公司类型:"
                      prop="compType"
                    >
                      <el-input
                        v-model="form.compType"
                        placeholder="公司类型"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="所属行业:"
                      prop="industry"
                    >
                      <el-input
                        v-model="form.industry"
                        placeholder="所属行业"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="曾用名:"
                      prop="oldName"
                    >
                      <el-input v-model="form.oldName" placeholder="曾用名" />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="成立日期:"
                      prop="foundDay"
                    >
                      <el-date-picker
                        v-model="form.foundDay"
                        type="date"
                        placeholder="请输入成立日期"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="联系电话:"
                      prop="phone"
                    >
                      <el-input v-model="form.phone" placeholder="联系电话" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="其他电话:"
                      prop="otherPhone"
                    >
                      <el-input
                        v-model="form.otherPhone"
                        placeholder="其他电话"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="注册资本:"
                      prop="regCap"
                    >
                      <el-input
                        v-model="form.regCap"
                        placeholder="请输入注册资本"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="实缴资本:"
                      prop="realCap"
                    >
                      <el-input
                        v-model="form.realCap"
                        placeholder="请输入实缴资本"
                      />
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :span="spanNum">
                    <el-form-item label-width="100px" label="网址:" prop="url">
                      <el-input v-model="form.url" placeholder="网址" />
                    </el-form-item>
                  </el-col> -->
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="邮箱:"
                      prop="email"
                    >
                      <el-input v-model="form.email" placeholder="邮箱" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>

                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="合作人员:"
                      prop="email"
                    >
                      <el-input
                        v-model="form.collaborator"
                        placeholder="合作人员"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="合作部门:"
                      prop="email"
                    >
                      <el-input
                        v-model="form.collDepartment"
                        placeholder="合作部门"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item label-width="100px" label="网址:" prop="url">
                      <el-input v-model="form.url" placeholder="网址" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="成交进度:"
                      prop="businessProgressList"
                    >
                      <el-select
                        v-model="businessProgressList"
                        filterable
                        placeholder="请选择"
                        style="width: 400px"
                      >
                        <el-option
                          v-for="item in businessOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="客户分类:"
                      prop="classify"
                    >
                      <el-select
                        v-model="form.classify"
                        filterable
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in componyClassifyOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item label="客户优先级：" prop="customRank" label-width="100px">
                      <el-select
                        v-model="form.customRank"
                        placeholder="客户优先级"
                        clearable
                        size="small"
                      >
                        <el-option
                          v-for="item in customRankOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="21">
                    <el-form-item
                      label-width="100px"
                      label="经营范围:"
                      prop="businessScope"
                    >
                      <el-input
                        v-model="form.businessScope"
                        minlength="500"
                        type="textarea"
                        placeholder="经营范围"
                        :rows="5"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <div style="text-align: center; margin-top: 20px">
                  <el-button
                    type="primary"
                    :loading="kqInfoLoading"
                    @click="handleModifyBasicInfo"
                  >确 定</el-button>
                </div>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="二：拓展信息" name="third">
              <el-form
                ref="extendForm"
                :model="extendForm"
                :rules="rules"
                label-width="80px"
              >
                <el-row>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="年用泵量:"
                      prop="YearUsage"
                    >
                      <el-input
                        v-model="extendForm.YearUsage"
                        placeholder="年用泵量"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="产品类型:"
                      prop="classifyList"
                    >
                      <el-select
                        v-model="classifyList"
                        multiple
                        filterable
                        placeholder="请选择"
                        style="width: 400px"
                      >
                        <el-option
                          v-for="item in pumpOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="联系人1:"
                      prop="name1"
                    >
                      <el-input
                        v-model="extendForm.name1"
                        placeholder="请输入联系人1"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="职务1:"
                      prop="position1"
                    >
                      <el-input
                        v-model="extendForm.position1"
                        placeholder="职务1"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="联系方式1:"
                      prop="phone1"
                    >
                      <el-input
                        v-model="extendForm.phone1"
                        placeholder="联系方式1"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="联系人2:"
                      prop="name2"
                    >
                      <el-input
                        v-model="extendForm.name2"
                        placeholder="请输入联系人2"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="职务2:"
                      prop="position2"
                    >
                      <el-input
                        v-model="extendForm.position2"
                        placeholder="职务2"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="联系方式2:"
                      prop="phone2"
                    >
                      <el-input
                        v-model="extendForm.phone2"
                        placeholder="联系方式2"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="联系人3:"
                      prop="name3"
                    >
                      <el-input
                        v-model="extendForm.name3"
                        placeholder="请输入联系人3"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="职务3:"
                      prop="position3"
                    >
                      <el-input
                        v-model="extendForm.position3"
                        placeholder="职务3"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="联系方式3:"
                      prop="phone3"
                    >
                      <el-input
                        v-model="extendForm.phone3"
                        placeholder="联系方式3"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="联系人4:"
                      prop="name4"
                    >
                      <el-input
                        v-model="extendForm.name4"
                        placeholder="请输入联系人4"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="职务4:"
                      prop="position4"
                    >
                      <el-input
                        v-model="extendForm.position4"
                        placeholder="职务4"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="联系方式4:"
                      prop="phone4"
                    >
                      <el-input
                        v-model="extendForm.phone4"
                        placeholder="联系方式4"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="联系人5:"
                      prop="name5"
                    >
                      <el-input
                        v-model="extendForm.name5"
                        placeholder="请输入联系人5"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="职务5:"
                      prop="position5"
                    >
                      <el-input
                        v-model="extendForm.position5"
                        placeholder="职务5"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="联系方式5:"
                      prop="phone5"
                    >
                      <el-input
                        v-model="extendForm.phone5"
                        placeholder="联系方式5"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="联系人6:"
                      prop="name6"
                    >
                      <el-input
                        v-model="extendForm.name6"
                        placeholder="请输入联系人6"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="职务6:"
                      prop="position6"
                    >
                      <el-input
                        v-model="extendForm.position6"
                        placeholder="职务6"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum">
                    <el-form-item
                      label-width="100px"
                      label="联系方式6:"
                      prop="phone6"
                    >
                      <el-input
                        v-model="extendForm.phone6"
                        placeholder="联系方式6"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-form-item
                    label-width="100px"
                    label="竞争对手:"
                    prop="competitor"
                  >
                    <el-radio-group v-model="extendForm.competitor">
                      <el-radio label="1" value="1">配套业务人员</el-radio>
                      <el-radio label="2" value="2">分公司业务人员</el-radio>
                      <el-radio label="3" value="3">其他品牌</el-radio>
                      <el-radio label="4" value="4">国外品牌</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-col :span="spanNum2">
                    <el-form-item label-width="100px" label="介绍产品:">
                      <el-switch v-model="extendForm.isIntroduceProduct" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum2">
                    <el-form-item label-width="100px" label="试用机器:">
                      <el-switch v-model="extendForm.isTryDevice" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum2">
                    <el-form-item label-width="100px" label="赠送礼物:">
                      <el-switch v-model="extendForm.isGift" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum2">
                    <el-form-item label-width="100px" label="邀请考察:">
                      <el-switch v-model="extendForm.isInviteStudy" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="spanNum2">
                    <el-form-item label-width="100px" label="是否报价:">
                      <el-switch v-model="extendForm.isQuote" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum2">
                    <el-form-item label-width="100px" label="是否合作:">
                      <el-switch v-model="extendForm.isCooperate" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="spanNum2">
                    <el-form-item label-width="100px" label="宴请客户:">
                      <el-switch v-model="extendForm.isEatCustomer" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="spanNum2">
                    <el-form-item label-width="100px" label="转介绍:">
                      <el-switch
                        v-model="extendForm.isIntroduceCustomerForYou"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="21">
                    <el-form-item
                      label-width="100px"
                      label="备注:"
                      prop="extendDesc"
                    >
                      <el-input
                        v-model="extendForm.extendDesc"
                        minlength="500"
                        type="textarea"
                        placeholder="备注"
                        :rows="5"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <div style="text-align: center; margin-top: 20px">
                  <el-button
                    type="primary"
                    :loading="kqExtendLoading"
                    @click="handleModifyExtendInfo"
                  >确 定</el-button>
                </div>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="三：报价信息">
              <el-form
                v-show="showSearch"
                ref="orderQueryForm"
                :model="orderParams"
                :inline="true"
                label-width="85px"
              >

                <el-form-item label="报价单状态:" prop="status" label-width="100px">
                  <el-select
                    v-model="orderParams.status"
                    placeholder="状态"
                    clearable
                    size="small"
                  >
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleOrderQuery"
                  >搜索</el-button>
                  <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="orderResetQuery"
                  >重置</el-button>
                </el-form-item>
              </el-form>
              <el-table
                v-loading="orderLoading"
                height="650"
                :data="kqAllOrderList"
                stripe
              >
                <el-table-column
                  label="项目名称"
                  align="center"
                  prop="projectName"
                  show-overflow-tooltip
                  min-width="200"
                />
                <el-table-column
                  label="公司名称"
                  align="center"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <el-link
                      target="_blank"
                      :href="
                        'https://www.tianyancha.com/search?key=' + scope.row.compName
                      "
                    >
                      {{ scope.row.compName }}
                    </el-link>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="dealNum"
                  label="成交额(万)"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    {{ scope.row.allItemTotalNum / 10000 }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="状态"
                  align="center"
                  width="150"
                  class-name="small-padding"
                >
                  <template slot-scope="scope">
                    <el-tooltip v-if="scope.row.status=='-1'|| scope.row.status == undefined" content="未对接" placement="top">
                      <el-button
                        type="primary"
                        icon="el-icon-s-flag"
                        circle
                      ></el-button>
                    </el-tooltip>
                    <el-tooltip v-if="scope.row.status=='0'" content="希望不大" placement="top">
                      <el-button
                        type="info"
                        icon="el-icon-star-off"
                        circle
                      ></el-button>
                    </el-tooltip>
                    <el-tooltip v-if="scope.row.status=='1'" content="有希望" placement="top">
                      <el-button
                        type="success"
                        icon="el-icon-star-off"
                        circle
                      ></el-button>
                    </el-tooltip>
                    <el-tooltip v-if="scope.row.status=='2'" content="已放弃" placement="top">
                      <el-button
                        type="danger"
                        icon="el-icon-close"
                        circle
                      ></el-button>
                    </el-tooltip>
                    <el-tooltip v-if="scope.row.status=='3'" content="已成交" placement="top">
                      <el-button
                        type="success"
                        icon="el-icon-check"
                        circle
                      ></el-button>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column
                  label="总折扣"
                  align="center"
                  prop="totalDiscount"
                  show-overflow-tooltip
                />
                <el-table-column
                  label="创建时间"
                  align="center"
                  prop="create_datetime"
                  show-overflow-tooltip
                />
              </el-table>
              <pagination
                v-show="orderTotal > 0"
                :total="orderTotal"
                :page.sync="orderParams.pageNum"
                :limit.sync="orderParams.pageSize"
                @pagination="getOrderList"
              />
            </el-tab-pane>
            <el-tab-pane label="四：维护信息">

              <el-form
                v-show="showSearch"
                ref="kqMaintainInfoQueryForm"
                :model="mainTainQueryParams"
                :inline="true"
                label-width="85px"
              >

                <el-form-item label="创建时间">
                  <el-date-picker
                    v-model="dateRange"
                    size="small"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleMaintainInfoQuery"
                  >搜索</el-button>
                  <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="kqMaintainInfoResetQuery"
                  >重置</el-button>
                </el-form-item>
              </el-form>
              <el-table
                v-loading="kqMaintainInfoLoading"
                :data="kqMaintainInfoList"
                height="650"
                stripe
              >
                <el-table-column type="index" width="38" align="center" />
                <el-table-column
                  label="拜访时间"
                  align="center"
                  prop="create_datetime"
                  show-overflow-tooltip
                />
                <el-table-column label="公司名称" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <el-link
                      target="_blank"
                      :href="
                        'https://www.tianyancha.com/search?key=' + scope.row.compName
                      "
                    >
                      {{ scope.row.compName }}
                    </el-link>
                  </template>
                </el-table-column>
                <el-table-column
                  label="拜访目的"
                  align="center"
                  prop="purpose"
                  show-overflow-tooltip
                />

                <el-table-column
                  label="拜访详情"
                  align="center"
                  prop="extendDesc"
                  show-overflow-tooltip
                />
                <el-table-column
                  label="拜访效果"
                  align="center"
                  prop="score"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <el-rate v-model="scope.row.score" class-name="rateClass"></el-rate>
                  </template>

                </el-table-column>

                <el-table-column label="沟通方式" align="center" show-overflow-tooltip>

                  <template slot-scope="scope">
                    <el-tooltip v-if="scope.row.maintainType=='电话'" content="电话沟通" placement="top">
                      <el-button
                        type="primary"
                        icon="el-icon-phone"
                        circle
                      ></el-button>
                    </el-tooltip>
                    <el-tooltip v-if="scope.row.maintainType=='拜访'" content="实地拜访" placement="top">
                      <el-button
                        type="primary"
                        icon="el-icon-s-home"
                        circle
                      ></el-button>
                    </el-tooltip>
                    <el-tooltip v-if="scope.row.maintainType=='微信'" content="微信沟通" placement="top">
                      <el-button
                        type="primary"
                        icon="el-icon-chat-dot-round"
                        circle
                      ></el-button>
                    </el-tooltip>
                    <el-tooltip v-if="scope.row.maintainType=='邮件'" content="邮件沟通" placement="top">
                      <el-button
                        type="primary"
                        icon="el-icon-message"
                        circle
                      ></el-button>
                    </el-tooltip>

                  </template>

                </el-table-column>

              </el-table>

              <pagination
                v-show="mainTotal > 0"
                :total="mainTotal"
                :page.sync="mainTainQueryParams.pageNum"
                :limit.sync="mainTainQueryParams.pageSize"
                @pagination="getMainTainList"
              />

            </el-tab-pane>
            <el-tab-pane label="五：历史成交" name="second">
              <el-table
                :data="kqOrderList"
                height="650"
                style="width: 100%"
                stripe
              >
                <el-table-column type="index" align="center" />
                <el-table-column prop="orderDate" label="日期" />
                <el-table-column prop="maxDepartment" label="大区" />
                <el-table-column prop="department" label="部门" width="200" />
                <el-table-column prop="collaborator" label="业务员" />
                <el-table-column prop="sex" label="性别" width="50" />
                <el-table-column prop="isEmployed" label="是否在职">
                  <template slot-scope="scope">
                    {{ scope.row.isEmployed ? "是" : "否" }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="projectName"
                  label="项目名称"
                  show-overflow-tooltip
                />
                <el-table-column prop="dealNum" label="成交额(万)">
                  <template slot-scope="scope">
                    {{ scope.row.dealNum / 10000 }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="products"
                  label="采购信息"
                  show-overflow-tooltip
                />
                <el-table-column prop="orderType" label="类型" />
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </transition>
  </div>
</template>

<script>
import {
  listKqAllInfos,
  exportKqAllInfos,
  updateKqInfo,
  getKqInfo
} from "@/api/work/work";
import { getAllKqOrdersList } from "@/api/work/allKqOrders";
import {
  addKqExtendInfo,
  updateKqExtendInfo,
  listKqAllExtendInfos
} from "@/api/work/kqExtendInfos";
import {
  getKqMaintainInfosList
} from "@/api/work/kqMaintainInfo";
import {
  listKqAllPriceInfos
} from "@/api/work/kqPriceInfos";
export default {
  name: "Work",
  data() {
    return {
      // 遮罩层
      changeLoading: false,
      loading: true,
      orderLoading: false,
      kqMaintainInfoLoading: false,
      // tab
      tabIndex: "first",
      // 选中数组
      ids: [],
      showSearch: true,
      // 总条数
      total: 0,
      orderTotal: 0,
      mainTotal: 0,
      // 岗位表格数据
      kqAllInfoList: [],
      // 订单表格数据
      kqOrderList: [],
      kqMaintainInfoList: [],
      // 是否显示数据详情页面
      isShowDetail: false,
      spanNum: 8,
      spanNum2: 3,
      labelWidth: 100,
      isAddMode: true,
      classifyList: [],
      businessProgressList: [],
      mainTainClassifyList: [],
      kqAllOrderList: [],
      queryBusinessProgress: [],
      activeName: "first",
      kqExtendLoading: false,
      kqInfoLoading: false,
      modifyLoading: false,
      // 日期范围
      dateRange: [],
      title: "",
      open: false,
      statusOptions: [
        {
          value: "-1",
          label: "未对接"
        },
        {
          value: "0",
          label: "希望不大"
        },
        {
          value: "1",
          label: "有希望"
        },
        {
          value: "2",
          label: "已放弃"
        },
        {
          value: "3",
          label: "已成交"
        }
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        compName: undefined,
        province: undefined,
        city: undefined,
        district: undefined,
        businessProgress: undefined,
        isDelete: false,
        isMyCustomer: true
      },
      orderParams: {
        pageNum: 1,
        pageSize: 10,
        kqId: undefined
      },
      // 查询参数
      mainTainQueryParams: {
        pageNum: 1,
        pageSize: 10,
        compName: undefined,
        kqId: undefined
      },
      pumpOptions: [
        {
          value: "KQL/KQW 单级泵",
          label: "KQL/KQW 单级泵"
        },
        {
          value: "KQH/KQWH 弱腐蚀化工泵",
          label: "KQH/KQWH 弱腐蚀化工泵"
        },
        {
          value: "XBD 消防泵",
          label: "XBD 消防泵"
        },
        {
          value: "KQDP/KQDP 多级泵",
          label: "KQDP/KQDP 多级泵"
        },
        {
          value: "KQDL/KQDW 多级离心泵",
          label: "KQDL/KQDW 多级离心泵"
        },
        {
          value: "WL【7.5kW以下】排污泵",
          label: "WL【7.5kW以下】排污泵"
        },
        {
          value: "WQ【11-22kW】潜水排污泵",
          label: "WQ【11-22kW】潜水排污泵"
        },
        {
          value: "WQ【30kW以上】智慧型潜水排污泵",
          label: "WQ【30kW以上】智慧型潜水排污泵"
        },
        {
          value: "WQ-E 小排",
          label: "WQ-E 小排"
        },
        {
          value: "WQ-EC 小排",
          label: "WQ-EC 小排"
        },
        {
          value: "WQ-ES【轻型切碎式】 排污泵",
          label: "WQ-ES【轻型切碎式】 排污泵"
        },
        {
          value: "WQS切碎式排污泵",
          label: "WQS切碎式排污泵"
        },

        {
          value: "ZW自吸泵",
          label: "ZW自吸泵"
        }
      ],
      businessOptions: [
        {
          value: "未找到",
          label: "未找到"
        },
        {
          value: "待沟通",
          label: "待沟通"
        },
        {
          value: "待拜访",
          label: "待拜访"
        },
        {
          value: "已沟通",
          label: "已沟通"
        },
        {
          value: "已拜访",
          label: "已拜访"
        },
        {
          value: "已报价",
          label: "已报价"
        },
        {
          value: "已合作",
          label: "已合作"
        }, {
          value: "已放弃",
          label: "已放弃"
        }
      ],
      componyClassifyOptions: [
        {
          value: "环保水处理",
          label: "环保水处理"
        },
        {
          value: "水泵同行",
          label: "水泵同行"
        },
        {
          value: "消防设备",
          label: "消防设备"
        },
        {
          value: "配套机械",
          label: "配套机械"
        },
        {
          value: "市政建筑",
          label: "市政建筑"
        },
        {
          value: "核电电力",
          label: "核电电力"
        },
        {
          value: "石油化工",
          label: "石油化工"
        },
        {
          value: "钢铁冶炼",
          label: "钢铁冶炼"
        },
        {
          value: "煤炭矿山",
          label: "煤炭矿山"
        }
      ],
      customRankOptions: [
        {
          value: "Ⅰ",
          label: "Ⅰ【年用泵100万以上】"
        },
        {
          value: "Ⅱ",
          label: "Ⅱ【年用泵50万以上】"
        },
        {
          value: "Ⅲ",
          label: "Ⅲ【年用泵30万以上】"
        },
        {
          value: "Ⅳ",
          label: "Ⅳ【年用泵30万以下】"
        }
      ],
      // 表单参数
      form: {},
      extendForm: {},
      mainTainForm: {

      },
      rules: {
        compName: [
          { required: true, message: "公司名称不能为空", trigger: "blur" }
        ],
        compOwner: [
          { required: true, message: "公司法人不能为空", trigger: "blur" }
        ],
        empNum: [
          { required: true, message: "参保人数不能为空", trigger: "blur" }
        ],
        opStatus: [
          { required: true, message: "经营状态不能为空", trigger: "blur" }
        ],
        province: [
          { required: true, message: "省份不能为空", trigger: "blur" }
        ],
        city: [{ required: true, message: "城市不能为空", trigger: "blur" }],
        district: [
          { required: true, message: "区县不能为空", trigger: "blur" }
        ],
        address: [{ required: true, message: "详细不能为空", trigger: "blur" }],
        businessScope: [
          { required: true, message: "经营范围不能为空", trigger: "blur" }
        ]
      },
      mainTainRules: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询岗位列表 */
    getList() {
      this.loading = true;
      listKqAllInfos(this.queryParams).then((res) => {
        this.kqAllInfoList = res.data.results;
        this.total = res.data.count;
        this.loading = false;
      });
    },
    // xianfei
    getOrderList() {
      this.orderLoading = true;
      listKqAllPriceInfos(this.orderParams).then((res) => {
        this.kqAllOrderList = res.data.results;
        this.orderTotal = res.data.count;
        this.orderLoading = false;
      });
    },
    getMainTainList() {
      this.kqMaintainInfoLoading = true;
      getKqMaintainInfosList(
        this.addDateRange(this.mainTainQueryParams, this.dateRange)
      ).then((res) => {
        this.kqMaintainInfoList = res.data.results;
        this.mainTotal = res.data.count;
        this.kqMaintainInfoLoading = false;
      });
    },
    handleModifyBasicInfo() {
      this.form.businessProgress = this.businessProgressList.length
        ? this.businessProgressList.toString()
        : "";
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            this.kqInfoLoading = true;
            updateKqInfo(this.form).then(() => {
              this.msgSuccess("修改成功");
              this.kqInfoLoading = false;
            });
          }
        }
      });
    },
    handleModifyExtendInfo() {
      this.kqExtendLoading = true;
      this.extendForm.classify = this.classifyList.length
        ? this.classifyList.toString()
        : "";
      if (this.isAddMode) {
        this.extendForm.kqId = this.form.id;
        this.extendForm.compName = this.form.compName;
        addKqExtendInfo(this.extendForm).then(() => {
          this.msgSuccess("新增成功");
        }).then(() => {
          this.getKqAllExtendInfo();
        });
      } else {
        updateKqExtendInfo(this.extendForm).then(() => {
          this.kqExtendLoading = false;
          this.msgSuccess("修改成功！");
        });
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      const obj = this.queryBusinessProgress.toString();
      this.queryParams.businessProgress = obj;
      this.getList();
    },
    handleOrderQuery() {
      this.orderParams.pageNum = 1;
      this.getOrderList();
    },
    handleMaintainInfoQuery() {
      // this.mainTainQueryParams.pageNum = 1;
      this.mainTainQueryParams.kqId = this.form.id;
      this.getMainTainList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryBusinessProgress = [];
      this.handleQuery();
    },
    orderResetQuery() {
      this.resetForm("orderQueryForm");
      this.handleOrderQuery();
    },
    kqMaintainInfoResetQuery() {
      this.resetForm("kqMaintainInfoQueryForm");
      this.dateRange = [];
      this.handleMaintainInfoQuery();
    },
    handleback() {
      this.isShowDetail = !this.isShowDetail;
    },
    // 查询客户信息
    handleDetailView(row) {
      this.changeLoading = true;
      this.isShowDetail = !this.isShowDetail;
      this.classifyList = [];
      const id = row.id;
      this.activeName = "first";
      this.mainTainQueryParams.kqId = row.id;
      this.orderParams.kqId = row.id;
      const params = {
        pageNum: 1,
        pageSize: 1000,
        compName: row.compName
      };
      this.reset();
      // 1 基本信息
      const step1 = getKqInfo(id).then((res) => {
        this.form = res.data;
        if (this.form.businessProgress) {
          this.businessProgressList = this.form.businessProgress.split(",");
        }
      });
      // 2额外信息
      const step2 = listKqAllExtendInfos({
        kqId: id
      }).then((res) => {
        console.log(3333);
        const resList = res.data.results;
        resList.length == 1
          ? (this.isAddMode = false)
          : (this.isAddMode = true);
        this.extendForm = resList.length ? resList[0] : {};
        if (this.extendForm.classify && !this.isAddMode) {
          this.classifyList = this.extendForm.classify.split(",");
        }
      });
      // 3报价信息
      const step3 = listKqAllPriceInfos(this.orderParams).then((res) => {
        this.kqAllOrderList = res.data.results;
        this.orderTotal = res.data.count;
      });
      // 4维护信息
      const step4 = getKqMaintainInfosList(
        this.addDateRange(this.mainTainQueryParams, this.dateRange)
      ).then((res) => {
        this.kqMaintainInfoList = res.data.results;
        this.mainTotal = res.data.count;
      });
      // 5 历史成交
      const step5 = getAllKqOrdersList(params).then((res) => {
        this.kqOrderList = res.data.results;
      });

      setTimeout(() => {
        Promise.all([step1, step2, step3, step4, step5]).then(() => {
          this.changeLoading = false;
        });
      }, 1000);
    },
    getKqAllExtendInfo() {
      listKqAllExtendInfos({
        kqId: this.form.id
      }).then((res) => {
        const resList = res.data.results;
        resList.length == 1
          ? (this.isAddMode = false)
          : (this.isAddMode = true);
        this.extendForm = resList.length ? resList[0] : {};
        if (this.extendForm.classify && !this.isAddMode) {
          this.classifyList = this.extendForm.classify.split(",");
        }
        this.kqExtendLoading = false;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        compName: undefined,
        compOwner: undefined,
        regCap: undefined,
        realCap: undefined,
        foundDay: undefined,
        opStatus: undefined,
        province: undefined,
        city: undefined,
        district: undefined,
        compType: undefined,
        industry: undefined,
        oldName: undefined,
        empNum: undefined,
        phone: undefined,
        otherPhone: undefined,
        address: undefined,
        url: undefined,
        email: undefined,
        businessScope: undefined,
        collaborator: undefined,
        collDepartment: undefined,
        classify: undefined,
        // infoStatus: undefined,
        businessProgress: undefined
      };
      this.businessProgressList = [];
      this.resetForm("form");
      this.kqOrderList = [];
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有岗位数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return exportKqAllInfos(queryParams);
        })
        .then((response) => {
          this.download(response.data.file_url, response.data.name);
        });
    },
    CopyFileUrl(values) {
      const input = document.createElement("input");
      document.body.appendChild(input);
      input.setAttribute("value", values);
      input.select();
      if (document.execCommand("copy")) {
        document.execCommand("copy");
        this.msgSuccess("复制成功");
      }
      document.body.removeChild(input);
    }
  }
};
</script>
